import React, { useEffect, useCallback } from "react";
import { useHistory } from "react-router-dom";
import useQuery from "hooks/useQuery";
import { connect } from "react-redux";

import ShowDate from "utils/ShowDate";

import * as Action from "store/order-list/action";

import * as css from "./css/order-list";
import getTimestamp from "utils/GetTimestamp";

function OrderList(props) {
  const { orderList, action } = props;

  const { page, totalNum, list, loading, startDate, endDate } = orderList;

  const query = useQuery();
  let history = useHistory();

  const promotionPositionId = query.promotionPositionId;

  const fetchList = useCallback(
    (startDate, endDate) => {
      action.fetchList({
        pageSize: page.size,
        pageNum: page.num,
        promotionPositionId,
        startDate,
        endDate
      });
    },
    [action, page.num, page.size, promotionPositionId]
  );

  useEffect(() => {
    fetchList();
  }, [fetchList]);

  function indexColumn(text, record, index) {
    let num = index + 1 + (page.num - 1) * page.size;
    return num;
  }

  function moneyColumn(text, record, index) {
    return `${text} 元`;
  }

  function dateColumn(text, record, index) {
    // return ShowDate(new Date(record.orderPayTime));
    const {orderPayTime} = record;

    if (orderPayTime) {
      return ShowDate(new Date(getTimestamp(orderPayTime)));
    } else {
      return "--";
    }
  }

  function onPageChange(page) {
    action.setPageNum(page);
  }

  function onReturn() {
    history.go(-1);
  }

  function onSearch() {
    fetchList(startDate, endDate);
  }

  function onDateChange(date, dateString) {
    let startDate = new Date(dateString[0]);
    let endDate = new Date(dateString[1]);

    action.setStartDate(startDate.getTime());
    action.setEndDate(endDate.getTime());
  }

  function footer(currentPageData) {
    let arr = currentPageData.map(item => {
      return item.goodsPrice;
    });
    let sum = 0;

    if (arr.length > 0) {
      sum = arr.reduce((num, item, index) => {
        return num + item;
      });
    }
    return `总计：${sum} 元`;
  }

  return (
    <css.OrderList>
      {/* search */}
      <css.Search>
        <css.SearchLabel>时间</css.SearchLabel>
        <css.SearchDate onChange={onDateChange} />
        <css.SearchButton type="primary" onClick={onSearch}>
          搜索
        </css.SearchButton>
      </css.Search>
      {/* table */}
      <css.Table
        dataSource={list}
        bordered
        pagination={false}
        loading={loading}
        footer={footer}
      >
        <css.Column
          key="index"
          title="#"
          render={indexColumn}
          align="center"
          width={50}
        />
        <css.Column
          key="goodsName"
          title="商品名称"
          dataIndex="goodsName"
          align="center"
        />
        <css.Column
          key="goodsPrice"
          title="商品价格"
          dataIndex="goodsPrice"
          align="center"
          render={moneyColumn}
        />
        <css.Column
          key="orderPayTime"
          title="支付时间"
          dataIndex="orderPayTime"
          align="center"
          render={dateColumn}
        />
      </css.Table>
      {/* pagnation */}
      <css.Pagination
        current={page.num}
        pageSize={page.size}
        total={totalNum}
        onChange={onPageChange}
      />
      {/* button block */}
      <css.ButtonBlock>
        <css.ReturnButton onClick={onReturn}>返回</css.ReturnButton>
      </css.ButtonBlock>
    </css.OrderList>
  );
}

export default connect(
  state => {
    const { orderList } = state;

    return { orderList };
  },
  f => ({
    action: {
      setPageSize() {
        f(Action.setPageSize(...arguments));
      },
      setPageNum() {
        f(Action.setPageNum(...arguments));
      },
      setTotalNum() {
        f(Action.setTotalNum(...arguments));
      },
      setList() {
        f(Action.setList(...arguments));
      },
      setLoading() {
        f(Action.setLoading(...arguments));
      },
      setStartDate() {
        f(Action.setStartDate(...arguments));
      },
      setEndDate() {
        f(Action.setEndDate(...arguments));
      },
      fetchList() {
        f(Action.fetchList(...arguments));
      }
    }
  })
)(OrderList);
